<template>
  <div id="editAddress">
    <van-nav-bar title="修改地址" left-arrow :fixed="true" :border=true @click-left="onClickLeft" />
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-postal
      show-delete
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import {Toast} from 'vant';
import {mapState} from 'vuex'
import areaList from './../../../../config/area';
import {changeUserAddress,getCurrentUserAddress,delUserAddress} from './../../../../server/api/index'
import PubSub from 'pubsub-js'
export default {
  name: "EditAddress",
  data() {
    return {
     areaList:areaList,
      searchResult: [],
      addressInfo:{}
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  mounted(){
    if(this.$route.query.address_id){
      this.getCurrentAddress(this.userInfo.token,this.$route.query.address_id);
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
   async onSave() {
    if(this.userInfo.token){
                    // 1. 发起修改请求
                    let result = await changeUserAddress(this.addressInfo.id, this.userInfo.token,  content.name, content.tel, content.province+content.city+content.county, content.addressDetail, content.postalCode, content.isDefault, content.province, content.city, content.county, content.areaCode);
                    console.log(result);
                    //  2. 判断是否修改成功
                    if(result.success_code === 200){
                        Toast({
                            message: '修改地址成功！',
                            duration: 400
                        });
                        // 2.1 返回到上一级界面
                        this.$router.back();
                        // 2.2 发布修改成功
                        PubSub.publish('backToMyAddress');
                    }else {
                        Toast({
                            message: '修改地址失败！',
                            duration: 400
                        });
                    }
                }
    },
   async onDelete() {
      let  result = await delUserAddress(this.addressInfo.id); 
      if(result.success_code === 200){
                Toast({
                    message: '删除地址成功！',
                    duration: 400
                });
                // 2.1 返回到上一级界面
                this.$router.back();
                // 2.2 发布修改成功
                PubSub.publish('backToMyAddress');
            }else {
                Toast({
                    message: '删除地址失败！',
                    duration: 400
                });
            }
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '黄龙万科中心',
          address: '杭州市西湖区'
        }];
      } else {
        this.searchResult = [];
      }
    },
    async getCurrentAddress(user_id,address_id){
      let result = await getCurrentUserAddress(user_id,address_id);
      if (result.success_code === 200) {
        this.addressInfo = {
         id: result.data._id,
          name: result.data.address_name,
          tel: result.data.address_phone,
          province: result.data.province,
          city: result.data.city,
          county: result.data.county,
          addressDetail: result.data.address_area_detail,
          areaCode: result.data.areaCode,
          postalCode: result.data.address_post_code,
          isDefault: result.data.address_tag
        }
      }

    }
  }
};
</script>

<style scoped>
#editAddress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  z-index: 9999;
}
</style>